<template>
    <d2-container class="warning-header">
        <el-tabs type="card" @tab-click="handleTableClick" value="项目概览">
            <el-tab-pane label="项目概览" name="项目概览">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card class="box-card">
                            <div class="inner">
                                <ve-pie :data="errorPieChartData" :title="errorPieChartDataTitle"></ve-pie>
                            </div>
                        </el-card>
                    </el-col>


                    <el-col :span="12">
                        <el-card class="box-card">
                            <div class="inner">
                                <ve-pie :data="statuPieChartData" :title="statuPieChartDataTitle"></ve-pie>
                            </div>
                        </el-card>
                    </el-col>

                </el-row>
            </el-tab-pane>
            <el-tab-pane :label="tab2Name" :name="tab2Name">
                <el-card>
                    <el-row :gutter="20">
                        <el-form :inline="true" :style="formInline1display" :model="formInline1"
                                 class="demo-form-inline">
                            <el-form-item label="项目状态">
                                <el-select v-model="formInline1.status" placeholder="所有" style="width:140px">
                                    <el-option label="所有" value="-1"></el-option>
                                    <el-option label="其他" value="0"></el-option>
                                    <el-option label="在线" value="1"></el-option>
                                    <el-option label="离线" value="2"></el-option>
                                    <el-option label="故障" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="项目名称">
                                <el-input v-model="formInline1.projectName" style="width:140px"></el-input>
                            </el-form-item>
                            <el-form-item label="所属业主">
                                <el-input v-model="formInline1.username" style="width:140px"></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button icon="el-icon-search" size="mini" round @click="onSubmit1" type="primary">
                                    搜索
                                </el-button>
                            </el-form-item>
                        </el-form>

                        <el-form :inline="true" :style="formInline2display" :model="formInline1"
                                 class="demo-form-inline">

                            <el-form-item label="设备名称">
                                <el-input v-model="formInline2.deviceName" style="width:140px"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button icon="el-icon-search" size="mini" round @click="onSubmit3" type="primary">
                                    搜索
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                </el-card>
                <br/>
                <el-table :data="projectTableData.data" :stripe="true" :border="true" tooltip-effect="dark">
                    <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
                    <el-table-column v-for="item in tablehead" :prop="item.prop" :label="item.label" align="center"
                                     :key="item.prop"></el-table-column>

                </el-table>

            </el-tab-pane>
            <el-tab-pane label="故障信息" name="故障信息">
                <el-card>
                    <el-row :gutter="20">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="设备型号">
                                <el-select v-model="formInline.modtype" placeholder="所有" style="width:140px">
                                    <el-option v-for="(item,index) in modType " :key="index" :label="item.modName"
                                               :value="item.modType"></el-option>
                                </el-select>

                            </el-form-item>
                            <el-form-item label="故障类型">
                                <el-select v-model="formInline.LogType" placeholder="所有" style="width:140px">
                                    <el-option v-for="(item,index) in LogType " :key="index" :label="item.errorname"
                                               :value="item.errortype"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="处理状态">
                                <el-select v-model="formInline.ProcessFlag" placeholder="所有" style="width:140px">
                                    <el-option label="所有" value="0"></el-option>
                                    <el-option label="发出未接收" value="1"></el-option>
                                    <el-option label="接收未处理" value="2"></el-option>
                                    <el-option label="处理完成" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="采集器SN">
                                <el-input v-model="formInline.RtuSN" style="width:140px"></el-input>
                            </el-form-item>
                            <el-form-item label="发生时间">
                                <el-date-picker type="date" placeholder="选择日期" style="width:140px">
                                    <el-input v-model="formInline.beginTime"></el-input>
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="持续时间">
                                <el-date-picker type="date" placeholder="选择日期" style="width:140px">
                                    <el-input v-model="formInline.endTime"></el-input>
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button icon="el-icon-search" size="mini" round @click="onSubmit2" type="primary">
                                    搜索
                                </el-button>

                            </el-form-item>
                        </el-form>
                    </el-row>

                </el-card>
                <br/>
                <el-table :data="malfunctionTableData.data" :stripe="true" :border="true" tooltip-effect="dark">
                    <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
                    <el-table-column prop="LogDate" label="发生时间" align="center">
                    </el-table-column>
                    <el-table-column prop="LogEndTime" label="持续时间" align="center">
                    </el-table-column>
                    <el-table-column prop="ProjectName" label="项目名称" align="center">
                    </el-table-column>
                    <el-table-column prop="DevName" label="设备名称" align="center">
                    </el-table-column>
                    <el-table-column prop="installAddress" label="安装地址" align="center">
                    </el-table-column>
                    <el-table-column prop="errorType" label="告警级别" align="center">
                    </el-table-column>
                    <el-table-column prop="ErrorName" label="故障描述" align="center">
                    </el-table-column>
                    <el-table-column prop="IsReal" label="是否误报" align="center">
                    </el-table-column>
                    <el-table-column prop="ProcessFlag" label="处理状态" align="center">
                    </el-table-column>
                    <el-table-column prop="ReceiveBy" label="接收人" align="center">
                    </el-table-column>
                    <el-table-column prop="ReceiveTime" label="接收时间" align="center">
                    </el-table-column>
                    <el-table-column label="操作" width="190px" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" round
                                       icon="el-icon-edit">处理
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <template slot="footer">
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="projectTableDataCurrentPage"

                        layout="prev, pager, next, jumper"
                        :total="malfunctionTableData.total">
                </el-pagination>
            </div>
        </template>
    </d2-container>
</template>

<script>
    import {getUserProject, getProjectDevice} from '@/api/sys/getProject'
    import {getUserErrorList} from '@/api/sys/getErrorList'
    import {getUserErrorPie} from '@/api/sys/getErrorList'
    import {getUserProjectStatu} from '@/api/sys/getErrorList'
    import {modType, LogType, ProcessFlag} from "@/api/data/getWarningTable"
    import {mapState} from 'vuex'

    export default {
        mounted() {
            this.handleProjectTableData(1, 10, null)
            this.handleMalfunctionTableData(1, 10, null)
            this.handleErrorPieData(null)
            this.handleStatusPieData(null)

            modType().then(d => {
                this.modType = d.data;
            });
            LogType().then(d => {
                this.LogType = d.data;
            });
            ProcessFlag().then(d => {
                this.ProcessFlag = d.data;
            });

            this.tablehead = this.projectTableHead
        },
        watch: {
            porjectNode3: function (newnode, oldnode) {

                console.log('newUsernode', newnode)
                this.projectNode = newnode
                //饼图
                this.handleStatusPieData(this.user.Id, newnode.ID, newnode.ProjectNo, newnode.devType)
                this.handleErrorPieData(this.user.Id, newnode.ID, newnode.ProjectNo, newnode.devType)
                //故障信息
                this.handleMalfunctionTableData(1, 10, this.user.Id, newnode.ID, newnode.ProjectNo, newnode.devType)
                //搜索
                this.formInline2display = {display: 'block'}
                this.formInline1display = {display: 'none'}
                //设备列表
                this.tab2Name = '设备列表'
                this.handleDeviceTableData(1, 10, newnode.ID, newnode.ProjectNo, newnode.devType, this.formInline2)

                switch (newnode.devType) {

                    case 0:
                        this.tablehead = this.deviceTableHeadType0
                        break
                    case 9:
                        this.tablehead = this.deviceTableHeadTyp9
                        break
                    case 11:
                        this.tablehead = this.deviceTableHeadType11
                        break
                    case 10:
                        this.tablehead = this.deviceTableHeadType10
                        break
                    case 12:
                        this.tablehead = this.deviceTableHeadType12
                        break
                }
                console.log(this.tablehead)
            },
            porjectNode4: function (newnode, oldnode) {
                console.log('projectnewnode', newnode)
                this.user = newnode
                this.tab2Name = '项目列表'
                //搜索
                this.formInline2display = {display: 'none'}
                this.formInline1display = {display: 'block'}

                this.tablehead = this.projectTableHead
                this.handleProjectTableData(1, 10, this.user.Id)
                this.handleMalfunctionTableData(1, 10, this.user.Id)
                this.handleStatusPieData(this.user.Id)
                this.handleErrorPieData(this.user.Id)
            }
        },
        computed: {
            ...mapState('d2admin/projectSelect', [
                'porjectNode3', 'porjectNode4'
            ])
        },
        data() {
            return {
                formInline1display: {display: 'block'},
                formInline2display: {display: 'none'},
                projectNode: null,
                tablehead: null,
                projectTableHead: [
                    {prop: 'projectName', label: '项目名称'},
                    {prop: 'username', label: '项目所有者'},
                    {prop: 'errorcount', label: '故障数'},
                    {prop: 'onlinecount', label: '在线设备数'},
                    {prop: 'country', label: '国家'},
                    {prop: 'province', label: '省'},
                    {prop: 'city', label: '市'},
                    {prop: 'zone', label: '区'},
                    {prop: 'address', label: '详细地址'},
                    {prop: 'manager', label: '联系人'},
                    {prop: 'phone', label: '联系电话'},
                ],
                deviceTableHeadType0: [
                    {prop: 'projectName', label: '项目名称'}
                    , {prop: 'deviceNo', label: '设备序号'}
                    , {prop: 'deviceName', label: '设备名称'}
                    , {prop: 'online', label: '当前状态'}
                    , {prop: 'UALimit', label: 'A相电压报警阀值'}
                    , {prop: 'UBLimit', label: 'B相电压报警阀值'}
                    , {prop: 'UCLimit', label: 'C相电压报警阀值'}
                    , {prop: 'IALimit', label: 'A相电流报警阀值'}
                    , {prop: 'IBLimit', label: 'B相电流报警阀值'}
                    , {prop: 'ICLimit', label: 'C相电流报警阀值'}
                    , {prop: 'IZLimit', label: '漏电阀值'}
                    , {prop: 'T1Limit', label: '温度阀值1'}
                    , {prop: 'T2Limit', label: '温度阀值2'}
                    , {prop: 'T3Limit', label: '温度阀值3'}
                    , {prop: 'T4Limit', label: '温度阀值4'}
                ],
                deviceTableHeadTyp9: [
                    {prop: 'projectName', label: '项目名称'}
                    , {prop: 'deviceNo', label: '设备序号'}
                    , {prop: 'deviceName', label: '设备名称'}
                    , {prop: 'online', label: '当前状态'}
                    , {prop: 'UALimit', label: 'A相电压报警阀值'}
                    , {prop: 'UBLimit', label: 'B相电压报警阀值'}
                    , {prop: 'UCLimit', label: 'C相电压报警阀值'}
                    , {prop: 'IALimit', label: 'A相电流报警阀值'}
                    , {prop: 'IBLimit', label: 'B相电流报警阀值'}
                    , {prop: 'ICLimit', label: 'C相电流报警阀值'}
                    , {prop: 'IZLimit', label: '漏电阀值'}
                    , {prop: 'T1Limit', label: '温度阀值1'}
                    , {prop: 'T2Limit', label: '温度阀值2'}
                    , {prop: 'T3Limit', label: '温度阀值3'}
                    , {prop: 'T4Limit', label: '温度阀值4'}
                ],
                deviceTableHeadType11: [
                    {prop: 'projectName', label: '项目名称'}
                    , {prop: 'deviceNo', label: '设备序号'}
                    , {prop: 'deviceName', label: '设备名称'}
                    , {prop: 'online', label: '当前状态'}
                    , {prop: 'UALimit', label: '水压报警阈值'}
                    , {prop: 'IALimit', label: '水位报警阈值'}

                ],
                deviceTableHeadType10: [
                    {prop: 'projectName', label: '项目名称'}
                    , {prop: 'deviceNo', label: '设备序号'}
                    , {prop: 'deviceName', label: '设备名称'}
                    , {prop: 'online', label: '当前状态'}
                    , {prop: 'UALimit', label: '烟感报警阀值'}
                ],
                deviceTableHeadType12: [
                    {prop: 'projectName', label: '项目名称'}
                    , {prop: 'deviceNo', label: '设备序号'}
                    , {prop: 'deviceName', label: '设备名称'}
                    , {prop: 'online', label: '当前状态'}
                ],
                modType: [],
                LogType: [],
                ProcessFlag: [],
                formInline1: {
                    status: '所有',
                    projectName: '',
                    username: ''
                },
                formInline2: {
                    deviceName: '',
                },
                formInline: {
                    modtype: '',
                    LogType: '',
                    ProcessFlag: '',
                    RtuSN: '',
                    begin: '',
                    endTime: '',
                },
                tab2Name: '项目列表',
                errorPieChartData: {
                    columns: ['错误', '数量'],
                    rows: []
                },
                errorPieChartDataTitle: {
                    text: '告警情况',
                    y: 'bottom',
                    x: 'center'
                },
                statuPieChartDataTitle: {
                    text: '项目状态',
                    y: 'bottom',
                    x: 'center'
                },
                statuPieChartData: {

                    columns: ['状态', '数量'],
                    rows: []
                },
                projectTableData: [],
                malfunctionTableData: [],
                projectTableDataCurrentPage: 1,
                malfunctionTableDataCurrentPage: 1,
                user: null,
                currentPage: 1
            }
        },
        methods: {
            onSubmit1() {
                var UserId = ''
                if (this.user) {
                    UserId = this.user.UserId
                } else {
                    UserId = ''
                }
                this.handleProjectTableData(1, 10, UserId, this.formInline1);
            },
            onSubmit2() {
                var UserId = ''
                if (this.user) {
                    UserId = this.user.UserId
                } else {
                    UserId = ''
                }
                this.handleMalfunctionTableData(1, 10, UserId, this.user.Id, newnode.ID, newnode.ProjectNo, newnode.devType, this.formInline);
            },
            onSubmit3() {

                this.handleDeviceTableData(1, 10, this.projectNode.ID, this.projectNode.ProjectNo, this.projectNode.devType, this.formInline2);
            },
            handleTableClick(tab, event) {
                this.currentPage = tab.name
            },
            handleStatusPieData(userId, ID, ProjectNo, devType) {
                getUserProjectStatu(userId, ID, ProjectNo, devType).then(res => {
                    var rows = []
                    for (var item of res.data) {

                        var row = {}
                        switch (item.status) {
                            case 1:
                                row.状态 = '正常'
                                break
                            case 2:
                                row.状态 = '离线'
                                break
                            case 3:
                                row.状态 = '故障'
                                break
                            case 0:
                                row.状态 = '其他'
                                break
                        }
                        row.数量 = item.count
                        rows.push(row)
                    }
                    this.statuPieChartData.rows = rows
                })
            },
            handleErrorPieData(userId, ID, ProjectNo, devType) {
                getUserErrorPie(userId, ID, ProjectNo, devType).then(res => {
                    var rows = []
                    for (var item of res.data) {
                        var row = {}
                        row.错误 = item.Note
                        row.数量 = item.errorCount
                        rows.push(row)
                    }
                    this.errorPieChartData.rows = rows
                })
            },
            handleMalfunctionTableData(pageno, pagesize, userId, ID, ProjectNo, devType, forminline) {
                getUserErrorList(pageno, pagesize, userId, forminline).then(res => {
                    this.malfunctionTableData = res
                })
            },
            handleProjectTableData(pageno, pagesize, userId, forminline) {
                getUserProject(pageno, pagesize, userId, forminline).then(res => {
                    this.projectTableData = res
                })
            },
            handleDeviceTableData(pageno, pagesize, ID, ProjectNo, devType, formInline) {
                getProjectDevice(pageno, pagesize, ID, ProjectNo, devType, formInline).then(res => {
                    this.projectTableData = res
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            //根据不同的tab页面显示不同的页码
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                switch (this.currentPage) {
                    case '项目概览':
                        break
                    case '项目列表':
                        this.handleProjectTableData(val, 10, this.user.UserId)
                        break
                    case '设备列表':
                        this.handleDeviceTableData(val, 10, this.projectNode.ID, this.projectNode.ProjectNo, this.projectNode.devType)
                        break
                    case '故障信息':
                        this.handleMalfunctionTableData(val, 10, this.user.UserId)
                        break
                }

            },
        },
    }
</script>

<style scoped>

</style>
